import React,{ Component } from 'react';
import './clinetDetails.scss';
import FollowUp from './followUp.jsx';
import RadarClinet from './radarClinet.jsx';
import { 
	Link
} from 'react-router-dom';
import { DatePicker, message } from 'antd';
import locale from 'antd/lib/date-picker/locale/zh_CN';
// import moment from 'moment';
import { accountBaseInfo, editExpectClosing, accountDataAnalyze, callerDateActive, editExpectClosingDate, followUpList } from 'api/clinetDetails.js';
let startPoint;
let currPoint;
let moveLeng;
let i = 0
export default class ClinetDetails extends Component{
	constructor (props) {
		super(props)
		this.state={
			navList: ['跟进', '雷达分析'],
			navNum: 0,
			content: '',
			open: false,
			clinetDetailsInfo: {},
			sign_name: [],
			currentTag: 50,
			fontSize1: 'fontSize1',
			fontSize2: 'fontSize2',
			fontSize: 'fontSize',
			move: -94,
			hiden: 'hiden',
			pieData: {},
			lineData: [],
			timeData: '2018-01-02',
			fixed: '',
			followUp: [],
			employee_img: ''
		}
	}
	according () { //显示成交率
		this.setState({
			hiden: '',
			fixed: 'fixed'
		})
	}
	noAccording () { //隐藏成交率
		this.setState({
			hiden: 'hiden',
			fixed: ''
		})
	}
	show (index) { //选项卡
		this.setState({
			navNum: index
		},() => {
			if (index === 0){
				this.setState({
					content: <FollowUp followUp={this.state.followUp}/>
				})
			} else if (index === 1){
				this.setState({
					content: <RadarClinet pieData={this.state.pieData} lineData={this.state.lineData} />
				})
			}
		})
	}
	pushHistory () { //跳转
		this.props.history.push({
			pathname: `${window.baseUrl}/clinetDetails/clientLabel`,
			state: {
				user_id: this.props.location.state.account_user_id,
				sign_name: this.state.clinetDetailsInfo.sign_name
			}
		})
	}
	changeTime () {
		this.setState({
			open: this.state.open === true ? false : true
		})
	}
	getNowFormatDate() { //获取当时时间
	  var date = new Date();
	  var seperator1 = "-";
	  var seperator2 = ":";
	  var month = date.getMonth() + 1;

	  var strDate = date.getDate();
	  if (month >= 1 && month <= 9) {
	    month = "0" + month;
	  }
	  if (strDate >= 0 && strDate <= 9) {
	    strDate = "0" + strDate;
	  }
	  var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
	    + " " + date.getHours() + seperator2 + date.getMinutes()
	    + seperator2 + date.getSeconds();
	  return currentdate;
	}
	onChange (time, date) {
		editExpectClosingDate({//修改预计成交日期
			employee_expect_closing_date: date,
			account_user_id: this.props.location.state.account_user_id
		}).then(res => {
			if (res.code === 1) {
				var data = this.getNowFormatDate();
				this.setState({
					clinetDetailsInfo: {...this.state.clinetDetailsInfo, 
						employee_expect_closing_date: date
					},
					open: false,
					followUp: [{account_user_id: this.props.location.state.account_user_id, content: "更新预计成交日期为"+date ,employee_img: this.state.employee_img, create_at: data },...this.state.followUp]
				}, () => {
					this.show(0)
				})
			} else {
				message.error(res.message)
				this.setState({
					open: false
				})
			}
		})
	}
	_editExpectClosing () {//修改预计成交率
		editExpectClosing({
			employee_id: 1,
			account_user_id: this.props.location.state.account_user_id,
			employee_expect_closing: this.state.currentTag
		}).then(res => {
			if (res.code === 1){
				var strDate1 = this.getNowFormatDate();
				this.setState({
					hiden: 'hiden',
					clinetDetailsInfo: {...this.state.clinetDetailsInfo, 
						employee_expect_closing: this.state.currentTag
					},
					fixed: '',
					followUp: [{account_user_id: this.props.location.state.account_user_id, content: "更新预计成交率为"+this.state.currentTag+"%" ,employee_img: this.state.employee_img, create_at: strDate1 },...this.state.followUp]
				}, () => {
					this.show(0)
				})
			}
		})
	}
	start = (e) => {
		startPoint = e.targetTouches[0].pageY;
	}
	move = (e) => {
		currPoint = e.targetTouches[0].pageY;
		moveLeng = currPoint-startPoint;
	}
	end = () => {
		if(moveLeng < 0){
			this.setState({
				currentTag: this.state.currentTag - parseInt(moveLeng/30),
				move: this.state.move + parseInt(moveLeng/30)*2
			})
		} else {
			this.setState({
				currentTag: this.state.currentTag + parseInt(-moveLeng/30),
				move:this.state.move-parseInt(-moveLeng/30)*2
			})
		}
	}
	componentDidMount(){
		document.title = '客户详情'
		accountDataAnalyze().then(res => {
			this.setState({
				pieData: res.data
			})
		})
		callerDateActive({account_user_id: this.props.location.state.account_user_id}).then(res => {
			this.setState({
				lineData: res.data
			})
		})
		accountBaseInfo({ //客户基本信息
			employee_id: 1,
			// account_user_id: 1
			account_user_id: this.props.location.state.account_user_id
		}).then(res => {
			if(res.code === 1){
				this.setState({
					clinetDetailsInfo: res.data,
					sign_name: res.data.sign_name,
					currentTag: res.data.employee_expect_closing,
					move: this.state.move+(50-res.data.employee_expect_closing)*2
				})
			} else {
				message.error(res.message,3);
			}
		})
		followUpList({
			employee_id: 1,
			account_user_id: this.props.location.state.account_user_id
		}).then(res => {
			if(res.code === 1){
				this.setState({
					followUp: res.data
				}, () => {
					this.show(0)
					this.state.followUp.forEach((value,index) => {
						this.setState({
							employee_img: value.employee_img
						})
					})
				})
			}
		})
	}
	render(){
		let shows = [];
		let deg;
		for (let i = 1; i < 101; i++){
			deg = (i - this.state.currentTag) * 3.6;
			shows.push(<li key={i} style={{transform: `rotateX(${deg}deg) translateZ(-0.5rem)`}} className={this.state.currentTag - 1 === i ||  this.state.currentTag + 1 === i ? this.state.fontSize1 : this.state.currentTag - 2 === i ||  this.state.currentTag + 2 === i ? this.state.fontSize2 : this.state.currentTag === i ? 'fontSize' : undefined} onTouchStart={this.start} onTouchMove={this.move} onTouchEnd={this.end.bind(this)}>{i}%</li>)
		}
		return(
			<div className={`clinetDetails ${this.state.fixed}`}>
				{/*<div className="title">
					<div onClick={this.goBack.bind(this)}><i className="glyphicon glyphicon-left"></i></div>
					<div>客户详情</div>
					<div><i className="glyphicon glyphicon-options"></i></div>
				</div>*/}
				<div className="clinetDetails_header">
					<div className="clinetDetails_news">
						<img src={this.state.clinetDetailsInfo.wx_avatar} alt="lalal"/>
						<p className="clinetDetails_name">{this.state.clinetDetailsInfo.account_note}</p>
						<Link to={
							{
								pathname: `${window.baseUrl}/clinetDetails/clientNews`,
								state: {
									account_user_id: this.props.location.state.account_user_id
								}
							}
						}>资料详情 ></Link>
						<span className="clinetDetails_mag"><Link to={
							{
								pathname: `${window.baseUrl}/messageCont`,
								state: {
									account_user_id: this.props.location.state.account_user_id
								}
							}
						}>发消息</Link></span>
					</div>
					<div className="clinetDetails_data">
						<div>
							<p>预计成交日</p>
							<span onClick={this.changeTime.bind(this)}>{this.state.clinetDetailsInfo.employee_expect_closing_date}</span>
						</div>
						<div onClick={this.according.bind(this)}>
							<p>预计成交率</p>
							<span>{this.state.clinetDetailsInfo.employee_expect_closing}%</span>
						</div>
					</div>
					<p className="clinetDetails_line"></p>
				</div>
				<div className="clinetDetails_label">
					<span>客户标签</span>
					<span className="glyphicon glyphicon-label" onClick={this.pushHistory.bind(this)}></span>
					<ul className="clinetDetails_label_list">
					{
						this.state.sign_name.map((item,index) => {
							return(
								<li key={index}>{item}</li>
							)
						})
					}
					</ul>
				</div>
				<div className="clinetDetails_nav">
				{
					this.state.navList.map((item,index) => {
						return(
							<div className={this.state.navNum === index ? 'cardActive' : undefined} key={index} onClick={this.show.bind(this,index)}>{item}</div>
						)
					})
				}
				</div>
				<p className="clinetDetails_nav_line"></p>
				<div>
					{this.state.content}
				</div>
				<div className={this.state.open ? 'changeTime' : 'changeTime hiden'} >
					<DatePicker onChange={this.onChange.bind(this)} format={'YYYY-MM-DD'} open={this.state.open} locale={locale} />
				</div>
				<div className={`clinetDetails_employee_closing ${this.state.hiden}`}>
					<div className="clinetDetails_closing_content">
						<p className="clinetDetails_closing__title"><span onClick={this.noAccording.bind(this)} className="clientLabel_left">取消</span>预计成交率<span onClick={this._editExpectClosing.bind(this)} className="clientLabel_right">确定</span></p>
						<div className="ul_contain">
							<ul style={{position: 'relative',top: `${this.state.move}rem`}}>{shows}</ul>
						</div>
					</div>
				</div>
			</div>
		)
	}
}